<template>
    <el-card class="box-card">
        <template #header>
            <!-- //卡片头部 -->
            <div class="detail">挂号详情</div>
            <div class="top">
                <el-tag type="success" class="ml=2">
                    {{ OrderInfo.param?.orderStatusString }}
                </el-tag>
                <div class="right_info">
                    <img src="../../../../assets/images/code_app.png" alt="">
                    <span></span>
                    <div class="info">
                        <p>微信 关注 “北京114预约挂号”</p>
                        <p>“快速预约挂号”</p>
                    </div>
                </div>
            </div>
            <!-- 订单详情底部的结构 -->
            <div class="bottom">
                <div class="left">
                    <!-- 左侧展示订单详情信息 -->
                    <el-descriptions class="margin-top" :column="1" border>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">就诊人信息</div>
                            </template>
                            {{ OrderInfo.patientName }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">就诊日期</div>
                            </template>
                            {{ OrderInfo.reserveDate }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">就诊医院</div>
                            </template>
                            {{ OrderInfo.hosname }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">就诊科室</div>
                            </template>
                            {{ OrderInfo.depname }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">医生职称</div>
                            </template>
                            {{ OrderInfo.title }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">医事服务费</div>
                            </template>
                            <span style="color: red">{{ OrderInfo.amount }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">挂号单号</div>
                            </template>
                            {{ OrderInfo.outTradeNo }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">挂号时间</div>
                            </template>
                            {{ OrderInfo.createTime }}
                        </el-descriptions-item>
                    </el-descriptions>
                    <div class="btn" v-if="OrderInfo.orderStatus == 0 || OrderInfo.orderStatus == 1">
                        <el-popconfirm title="确定取消预约吗?" @confirm="cancel">
                            <template #reference>
                                <el-button>取消预约</el-button>
                            </template>
                        </el-popconfirm>
                        <el-button type="primary" size="default" v-if="OrderInfo.orderStatus == 0"
                            @click="openDialog">支付</el-button>
                    </div>
                </div>
                <div class="right">
                    <el-card class="box-card">
                        <template #header>
                            <div class="card-header">
                                <span>注意事项</span>
                            </div>
                        </template>
                        <p>1.请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；</p>
                        <p style="color: red">
                            2.【取号】就诊当天需在{{ OrderInfo.fetchTime }}前
                            在医院取号，未取号视为爽约，该号不退不换；
                        </p>
                        <p>
                            3.【退号】在{{ OrderInfo.quitTime }}前可在线退号 ，逾期将不可办理退号退费；
                        </p>
                        <p>
                            4.北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；
                        </p>
                        <p>5.请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。</p>
                    </el-card>
                </div>
            </div>
        </template>

    </el-card>
    <!-- //展示支付二维码 -->
    <el-dialog @close="ClosePay" v-model="dialogVisible" title="支付页面" width="400">
        <!-- 支付需要使用的二维码图片 -->
        <div class="qrocde">
            <img :src="imgUrl" alt="" />
            <p>请使用微信扫一扫</p>
            <p>扫描二维码支付</p>
        </div>
        <template #footer>
            <el-button type="primary" size="default" @click="ClosePay">关闭窗口</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
//引入插件字符串转二维码
//@ts-ignore
import QRCode from "qrcode";
import { onMounted, ref } from 'vue';
import { GETORDERINFO, CancelOrder, reqQrcode, reqQueryPayState } from '@/api/user';
import { useRoute } from 'vue-router';
import { OrderResponseData, PayReslt } from '@/api/user/type';
import { ElMessage } from 'element-plus';
let $route = useRoute();
//存储微信二维码Url
let imgUrl = ref<string>();
//控制对话框
let dialogVisible = ref<boolean>(false);
//存储用户订单数据
let OrderInfo = ref<any>({})
//存储timer
let timer = ref<any>()
onMounted(() => {
    GetOrderinfo();
})
//关闭窗口
let ClosePay = () => {
    dialogVisible.value = false;
    clearInterval(timer.value);
}
//获取订单
let GetOrderinfo = async () => {
    //@ts-ignore
    let result: OrderResponseData = await GETORDERINFO($route.query.orderId as string);
    if (result.code == 200) {
        OrderInfo.value = result.data;
        console.log(OrderInfo.value);
    }
}

//取消订单
let cancel = async () => {
    try {
        await CancelOrder($route.query.orderId as string)
    }
    catch (error) {
        ElMessage({
            type: 'error',
            message: '取消失败'
        })
    }
}

//点击支付回调
let openDialog = async () => {
    //显示
    dialogVisible.value = true;
    //获取二维码信息
    let result: any = await reqQrcode($route.query.orderId as string);
    console.log(result.data);
    //生成二维码
    imgUrl.value = await QRCode.toDataURL(result.data.codeUrl);
    console.log(imgUrl.value, 666);
    //每隔几秒询问服务器是否支付
    timer.value = setInterval(async () => {
        let result: PayReslt = await reqQueryPayState($route.query.orderId as string)
        if (result.data) {
            dialogVisible.value = false;
            ElMessage({
                type: 'success',
                message: '支付成功'
            })
            clearInterval(timer.value);
            GetOrderinfo();
        }
    }, 2000)
}

</script>

<script lang="ts">
export default {
    name: 'Detail'
}
</script>

<style scoped lang="scss">
.box-card {
    .detail {
        color: #7f7f7f;
        font-weight: 900;
    }

    .top {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        padding: 10px;

        .tag {
            display: flex;
            justify-content: center;
            align-items: center;

            span {
                margin-left: 5px;
            }
        }

        .right_info {
            display: flex;
            justify-content: space-between;
            align-items: center;

            img {
                width: 40px;
                height: 40px;
            }

            .info {
                margin-left: 10px;

                p {
                    font-size: 12px;
                    line-height: 20px;
                }
            }
        }
    }

    .bottom {
        display: flex;
        margin-top: 20px;

        .left {
            flex: 4;

            .btn {
                margin: 10px 0px;
            }
        }

        .right {
            margin-left: 20px;
            flex: 6;

            p {
                line-height: 30px;
            }
        }
    }
}

::v-deep(.el-dialog__body) {
    border-top: 1px solid #7f7f7f;
    border-bottom: 1px solid #7f7f7f;
}

.qrocde {
    display: flex;
    flex-direction: column;
    align-items: center;

    p {
        line-height: 30px;
    }
}
</style>
